<script setup lang="ts">
import { watch } from 'vue'
import { useRoute } from 'vue-router'
import { useTitle } from '@vueuse/core'
import { APP_TITLE, PRIMARY_COLOR } from '@/config'

const route = useRoute()

watch(() => route.path, () => {
  useTitle(`${route.name as string} - ${APP_TITLE}` || `${APP_TITLE}`)
}, { immediate: true })
</script>

<template>
  <a-config-provider
    :theme="{
      token: {
        colorPrimary: PRIMARY_COLOR,
      },
    }"
  >
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </a-config-provider>
</template>
